<template>
  <div class="aboutconfiguration">
    <!--关于配置 aboutConfiguration-->
    <div class="con">
           <div class="con-top">关于配置</div>
           <div class="middle">
               <div class="middle-con">
                     <div class="items">
                         <div class="leftname">公司名称</div>
                         <el-input v-model="typename"  />
                     </div>
                     <div class="items">
                         <div class="leftname">LOGO</div>
                         <!-- <el-input v-model="typename"  /> -->
                         <div class="mylogo">
                             <img src="../../assets/leftmenu/jiahao.png" alt="">
                         </div>
                     </div>
                     <div class="items">
                         <div class="leftname">背景图</div>
                            <el-upload
                                    class="upload-demo"
                                    drag
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    multiple>
                                   <div>
                                        <img src="../../assets/leftmenu/jiahao.png" alt="">
                                       <div class="el-upload__text" style="font-size:12px;color:#666666;margin-top:20px">将文件拖到此处，或点击上传</div>
                                   </div>
                            </el-upload>
                     </div>
               </div>
           </div>
            <div class="bottom-btn">
                        <div class="quxiao" @click="zhuandialogflag = true">点击预览</div>
                        <div style="margin-left:8px">保存配置</div>
            </div>
            <!-- 点击预览 -->
             <el-dialog width="50%" draggable  title="" :close-on-click-modal='false'
                    :visible.sync="zhuandialogflag">
                    <div class="mydiodiv">
                          <div class="logoimg">
                              <img src="../../assets/leftmenu/logo.png" alt="">
                          </div>
                          <img src="../../assets/leftmenu/quxiao.png" alt="" class="quxiaoimg" @click="zhuandialogflag = false">
                          <div class="tiptitle">
                              <div class="bigtitle">管理机配置工具</div>
                              <div class="smalltitle">智能网关</div>
                          </div>
                          <div class="banben">版本号：V2.3.15</div>
                    </div>
                </el-dialog>
    </div>
  </div>
</template>

<script>
export default {


  data() {
    return {
      typename:"",
      zhuandialogflag:false,
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>
<style lang="scss" scoped>
    .aboutconfiguration {
           width: 100%;
           height: 100%;
           .con {
              width: 100%;
              height: 100%;
              background-color: #fff;
              color: #1A1A1A;
              overflow: hidden;
              .middle {
                 width: 100%;
                 height: calc(100% - 95px);
                 display: flex;
                 justify-content: center;
                 .middle-con {
                      margin-top: 40px;
                       .items {
                         display: flex;
                         align-items: center;
                         padding: 8px 0px;
                         margin-bottom: 20px;
                         .leftname {
                             min-width: 65px;
                             width: 65px;
                             text-align: right;
                             font-size: 12px;
                             color: #666666;
                             margin-right: 8px;
                         }
                         
                       }
                 }
                 .mylogo {
                     width: 120px;
                     height: 120px;
                     background-color: #fafafa;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     border-radius: 4px;
                     border: 1px dashed #CCCCCC;
                 }
              }
              .con-top {
                 width: 100%;
                 height: 42px;
                 line-height: 42px;
                 padding-left: 12px;
                 border-bottom: 1px solid #e6e6ee;
                 font-size: 14px;
              }
               .bottom-btn {
                    display: flex;
                    width: 100%;
                    height: 52px;
                    align-items: center;
                    justify-content: center;
                    border-top: 1px solid #E6E6E6;
                    div {
                        padding: 6px 8px;
                        border-radius: 4px;
                        background-color: #2178F1;
                        color: #fff;
                        font-size: 12px;
                        box-sizing: border-box;
                    }
                    .quxiao {
                        padding: 5px 8px;
                         border: 1px solid #2178F1;
                         color: #2178F1;
                         background-color: #E7F0FF;
                    }
                }
           }
           :deep(.el-upload-dragger) {
             display: flex;
             align-items: center;
             justify-content: center;
              background-color: #fafafa;
           }
           :deep(.el-dialog__header) {
             display: none;
           }
           :deep(.el-dialog) {
             border-radius: 4px;
              max-width: 900px;
           }
           :deep(.el-dialog__body) {
             padding: 0px;
             max-width: 900px;
             height: 360px;
             border-radius: 4px;
            //  background-color: black;
             overflow: hidden;
           }
           .mydiodiv {
             width: 100%;
             height: 100%;
             position: relative;
             background: url(../../assets/leftmenu/bgimg.png) no-repeat;
             background-size: 100% 100%;
             .logoimg {
                  position: absolute;
                  top: 20px;
                  left: 20px;
             }
             .tiptitle {
                 position: absolute;
                 top: 124px;
                 left: 60px;
                 .bigtitle {
                     font-size: 56px;
                     color: #3E8FFF;
                     font-weight: bold;
                 }
                 .smalltitle {
                     font-size: 20px;
                     color: #E6E6E6;
                 }
             }
             .quxiaoimg {
                 position: absolute;
                 top: 20px;
                 right: 20px;
             }
             .banben {
                 position: absolute;
                 left: 50%;
                 bottom: 20px;
                 transform: translateX(-50%);
                 color: #E6E6E6;
                 font-size: 12px;
             }
           }
    }
</style>